import { useState, useEffect, useRef } from 'react'
import './navigation.css'
import { useNavigate } from 'react-router-dom'
function Navigation() {
  const [showFirst, setShowFirst] = useState(true)
  const [showSubMenu, setShowSubMenu] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const timeoutRef = useRef<number | null>(null)

  useEffect(() => {
    const timer = setInterval(() => {
      setShowFirst(prev => !prev)
    }, 1500)
    return () => clearInterval(timer)
  }, [])

  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setShowSubMenu(false)
      }
    }

    if (showSubMenu) {
      document.addEventListener('mousedown', handleClickOutside)
    }

    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [showSubMenu])
  
  const navigate = useNavigate()
  const dl=()=>{
    navigate('/login')
  }

  const toggleSubMenu = () => {
    setShowSubMenu(!showSubMenu)
  }

  const handleMouseEnter = () => {
    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current)
      timeoutRef.current = null
    }
    setShowSubMenu(true)
  }

  const handleMouseLeave = () => {
    timeoutRef.current = setTimeout(() => {
      setShowSubMenu(false)
    }, 150) // 150ms延迟，给用户时间移动到菜单
  }

  return (
    <div className="nav-header">
      <div className="nav-left">
        <img src="/public/img/d.png" alt="logo" className="nav-logo" />
      </div>
      <div className="nav-center">
        <span className="nav-item">视频|实拍</span>
        <span className="nav-item">设计模板</span>
        <span className="nav-item">PPT</span>
        <span className="nav-item">摄影/人像</span>
        <div 
          className={`nav-item nav-dropdown ${showSubMenu ? 'active' : ''}`}
          onClick={toggleSubMenu}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
          ref={dropdownRef}
        >
          素材导航
          <span className="dropdown-arrow">▼</span>
          {showSubMenu && (
            <div 
              className="nav-submenu"
              onMouseEnter={handleMouseEnter}
              onMouseLeave={handleMouseLeave}
            >
              {/* 顶部横幅 */}
              <div className="submenu-banner">
                <div className="banner-content">
                  <span className="banner-text">个人全站VIP仅29元起，站内十大类目均可下载</span>
                  <button className="banner-button">去开通&gt;</button>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">广告设计</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link" onClick={(e) => { e.preventDefault(); navigate('/advertising-design'); }}>海报设计</a>
                  <a href="#" className="submenu-link">展板设计</a>
                  <a href="#" className="submenu-link">背景素材</a>
                  <a href="#" className="submenu-link">元素素材</a>
                  <a href="#" className="submenu-link">节日海报</a>
                  <a href="#" className="submenu-link">LOGO</a>
                  <a href="#" className="submenu-link">单页折页</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">视频音频</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">AE模板</a>
                  <a href="#" className="submenu-link">抖音视频</a>
                  <a href="#" className="submenu-link">巨幕宽屏</a>
                  <a href="#" className="submenu-link">背景视频</a>
                  <a href="#" className="submenu-link">实拍视频</a>
                  <a href="#" className="submenu-link">影视配乐</a>
                  <a href="#" className="submenu-link">广告配乐</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">线上营销</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">线上海报</a>
                  <a href="#" className="submenu-link">H5长图</a>
                  <a href="#" className="submenu-link">banner</a>
                  <a href="#" className="submenu-link">公众号</a>
                  <a href="#" className="submenu-link">小红书</a>
                  <a href="#" className="submenu-link">icon图标</a>
                  <a href="#" className="submenu-link">网页界面</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">办公文档</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">求职简历</a>
                  <a href="#" className="submenu-link">人事相关</a>
                  <a href="#" className="submenu-link">行政相关</a>
                  <a href="#" className="submenu-link">商务汇报</a>
                  <a href="#" className="submenu-link">教育培训</a>
                  <a href="#" className="submenu-link">手绘小报</a>
                  <a href="#" className="submenu-link">颁奖典礼</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">电商淘宝</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">详情页</a>
                  <a href="#" className="submenu-link">手机端</a>
                  <a href="#" className="submenu-link">C4D海报</a>
                  <a href="#" className="submenu-link">首页模板</a>
                  <a href="#" className="submenu-link">促销海报</a>
                  <a href="#" className="submenu-link">促销标签</a>
                  <a href="#" className="submenu-link">弹窗挂件</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">摄影图</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">自然风景</a>
                  <a href="#" className="submenu-link">餐饮美食</a>
                  <a href="#" className="submenu-link">建筑空间</a>
                  <a href="#" className="submenu-link hot-tag">人像摄影</a>
                  <a href="#" className="submenu-link">生活方式</a>
                  <a href="#" className="submenu-link">商务办公</a>
                  <a href="#" className="submenu-link">医疗健康</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">插画动图</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">情感表达</a>
                  <a href="#" className="submenu-link">节日节气</a>
                  <a href="#" className="submenu-link">教育文化</a>
                  <a href="#" className="submenu-link">动态海报</a>
                  <a href="#" className="submenu-link">动态插画</a>
                  <a href="#" className="submenu-link">科技概念</a>
                  <a href="#" className="submenu-link">动态二维码</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">装饰装修</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">背景墙</a>
                  <a href="#" className="submenu-link">文化墙</a>
                  <a href="#" className="submenu-link">装饰画</a>
                  <a href="#" className="submenu-link">地面装饰</a>
                  <a href="#" className="submenu-link">导视标识</a>
                  <a href="#" className="submenu-link">家居装饰</a>
                  <a href="#" className="submenu-link">婚礼效果图</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">字体</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">楷体</a>
                  <a href="#" className="submenu-link">黑体</a>
                  <a href="#" className="submenu-link">宋体</a>
                  <a href="#" className="submenu-link">创意字体</a>
                  <a href="#" className="submenu-link">拼音字体</a>
                  <a href="#" className="submenu-link">手写字体</a>
                  <a href="#" className="submenu-link hot-tag">中国风字体</a>
                </div>
              </div>
              
              <div className="submenu-item">
                <span className="submenu-title">3D素材</span>
                <div className="submenu-content">
                  <a href="#" className="submenu-link">3D元素</a>
                  <a href="#" className="submenu-link hot-tag">3D海报</a>
                  <a href="#" className="submenu-link">3D背景</a>
                  <a href="#" className="submenu-link">美陈雕塑</a>
                  <a href="#" className="submenu-link">材质贴图</a>
                  <a href="#" className="submenu-link">室内景观</a>
                  <a href="#" className="submenu-link">样机模型</a>
                </div>
              </div>
            </div>
          )}
        </div>
        <span className="nav-item">...</span>
        <span className="nav-divider" />
        <span className="nav-item nav-enterprise nav-bubble-wrap">
          <span className="nav-bubble nav-bubble-enterprise">咨询企业套餐</span>
          企业站
        </span>
        <span className="nav-item nav-red">政务图库</span>
      </div>
      <div className="nav-right">
        <span className="nav-vip-tag nav-bubble-wrap">
          <span className="nav-bubble nav-bubble-vip">
            {showFirst ? '适合90%用户' : '增下载账号'}
          </span>
          企业VIP授权
        </span>
        <span className="nav-vip-tag">个人VIP</span>
        <span className="nav-login" onClick={dl}>
          <img src="https://ts1.tc.mm.bing.net/th/id/OIP-C.5XQkiQsWBCDW1NhfAvcF9gHaIj?w=180&h=211&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="avatar" className="nav-avatar" />
          登录/注册
        </span>
      </div>
    </div>
  )
}

export default Navigation
